<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath }"></c:set>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>控制台</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- bootstrap css -->
<link rel="stylesheet" href="${ctx}/template/assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="${ctx}/template/assets/css/font-awesome.min.css" />
<!-- jquery ui grid css -->
<link rel="stylesheet"
	href="${ctx}/template/assets/css/jquery-ui-1.10.3.full.min.css" />
<!-- do not kown  -->
<link rel="stylesheet"
	href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />
<!-- ace ss -->
<link rel="stylesheet" href="${ctx}/template/assets/css/ace.min.css" />
<link rel="stylesheet" href="${ctx}/template/assets/css/ace-rtl.min.css" />
<link rel="stylesheet" href="${ctx}/template/assets/css/ace-skins.min.css" />
<style type="text/css">
#dialog {
	display: none;
	width: 600px;
	height: 400px;
}
</style>
</head>
<body onload="loadData(1,15)">
	
				<div class="page-content">
					<div class="row">
						<div class="col-xs-12">
							<div class="table-responsive">
								<table id="sample-table-1"
									class="table table-striped table-bordered table-hover">
									<!-- 头 -->
									<thead>
										<tr>
											<th class="center"><label> <input
													type="checkbox" class="ace" /> <span class="lbl"></span>
											</label></th>
											<th>用户名</th>
											<th>密码</th>
											<th>状态</th>
											<th>创建时间</th>
											<th>首次登陆时间</th>
											<th>最后登陆时间</th>
											<th>操作</th>
										</tr>
									</thead>
									<!-- 头 -->
									<!-- 内容 -->
									<tbody id="data_body">

									</tbody>
									<!-- 内容结束 -->
								</table>
								<!-- 分页开始 -->
								<ul id="pagination" class="pagination">
								</ul>
								<!-- 分页结束 -->
							</div>
							<!-- /.table-responsiv
							</div><!-- /.col -->
						</div>
						<!-- /.row -->
					</div>
					<!-- /.page-content -->

					<!-- 弹出层 -->
					<a class="btn" onclick="keleyidialog()">新增用户</a>
					<!-- Modal -->
					<div id="dialog" class="row" title=" 新增用户">
						<div class="col-xs-12">
							<form id="add_form" class="form-horizontal" role="form">
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right"
										for="form-field-1">用户名</label>

									<div class="col-sm-9">
										<input type="text" name="userName" id="userName" placeholder="用户名"
											class="col-xs-10 col-sm-5" />
									</div>
								</div>

								<div class="space-4"></div>

								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right"
										for="form-field-2">密码</label>

									<div class="col-sm-9">
										<input type="password" name="userPassword" id="userPassword" placeholder="密码"
											class="col-xs-10 col-sm-5" />
									</div>
								</div>
								<div class="space-4"></div>

								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right"
										for="form-field-2">状态</label> 
									<div class="col-sm-9">
									<select
										class=" col-sm-5" id="userStatus" name="userStatus">
										<option value="1">启用</option>
										<option value="0">未启用</option>
									</select>
									</div>
								</div>
								
								<div class="clearfix form-actions">
										<div class="col-md-offset-3 col-md-9">
											<button class="btn btn-info" type="button" onclick="addUser();">
												<i class="icon-ok bigger-110"></i>
												提交
											</button>
											&nbsp; &nbsp; &nbsp;
											<button class="btn" type="reset">
												<i class="icon-undo bigger-110"></i>
												清空
											</button>
										</div>
									</div>
							</form>
						</div>
					</div>
					
					<!-- 编辑用户角色 -->
					<div id="dialog_role" class="row" title="用户角色">
						<div class="col-xs-12">
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right"
										for="form-field-1">用户名</label>

									<div class="col-sm-9">
										<input type="text" name="userName" id="userName" placeholder="用户名"
											class="col-xs-10 col-sm-5" />
									</div>
								</div>
								<div class="space-4"></div>
                                <div class="form-group">
									<label class="col-sm-3 control-label no-padding-right"
										for="form-field-1">角色</label>

									<div class="col-sm-9">
										<input type="text" name="userName" id="userName" placeholder="用户名"
											class="col-xs-10 col-sm-5" />
									</div>
								</div>
								
								<div class="clearfix form-actions">
										<div class="col-md-offset-3 col-md-9">
											<button class="btn btn-info" type="button" onclick="addUser();">
												<i class="icon-ok bigger-110"></i>
												确定
											</button>
										</div>
									</div>
						</div>
					</div>
					
				</div>
	<jsp:include page="../common/import.jsp" />
	<script type="text/javascript">
		$(function() {
			$('#dialog').dialog({
				autoOpen : false,//如果设置为true，则默认页面加载完毕后，就自动弹出对话框；相反则处理hidden状态。 
				bgiframe : true, //解决ie6中遮罩层盖不住select的问题  
				width : 500,
				modal : true
			//这个就是遮罩效果   
			});
		})

		function keleyidialog() {
			$('#dialog').dialog('open');
			return false;
		}

		function addUser(){
			$.ajax({
				type : "POST",
				url : "${ctx}/admin/user/addUser",
				data : $("#add_form").serialize(),
				dataType : "json",
				success : function(data) {
					if(data.code==1){
						$('#dialog').dialog('close');
						$("#add_form")[0].reset(); 
						loadData(1,15);	
					}else{
						alert(data.message);
					}
				}
			});
		}
		
		function getStatus(userStatus){
			if(userStatus==1){
				return '<span class="label label-sm label-success">启用</span>';
			}
			return '<span class="label label-sm label-warning">未启用</span>';
		}
		
		function loadData(pageNum, pageSize) {
			$.ajax({
				type : "GET",
				url : "${ctx}/admin/user/getPageInfo",
				data : {
					pageNo : pageNum,
					pageSize : pageSize
				},
				dataType : "json",
				success : function(data) {
					var arr = data.data;
					$("#data_body").html("");
					$("#pagination").html("");
					if (arr.rows != null && arr.rows.length > 0) {
						data2page(arr.rows);
						initPage(arr);
					}
				}
			});
		}

		function data2page(list) {
			for (var i = 0; i < list.length; i++) {
				var tep = list[i];
				var temp = "<tr><td class='center'><label><input type='checkbox' class='ace'/>"
				temp = temp + "<span class='lbl'></span></label></td>";
				temp = temp + "<td>" + tep.userName + "</td>";
				temp = temp + "<td>" + tep.userPassword + "</td>";
				temp = temp + "<td>" + getStatus(tep.userStatus) + "</td>";
				temp = temp + "<td>" + formateDataCanNull(tep.createTime) + "</td>";
				temp = temp + "<td>" + formateDataCanNull(tep.firstLoginTime) + "</td>";
				temp = temp + "<td>" + formateDataCanNull(tep.lastLoginTime) + "</td>";
				temp = temp
						+ '<td><div class="visible-md visible-lg hidden-sm hidden-xs btn-group">'
						+ '<button class="btn btn-xs btn-success"><i class="icon-ok bigger-120"></i></button></td>';
				$("#data_body").append(temp);
			}
		}
	</script>
</body>
</html>

